<template>
  <div style="padding: 10px;">
    <Row>
      <Col span="20">
        <Input
          style="width: auto;margin-bottom: 16px"
          v-model.trim="listParam.name"
          placeholder="请输入名称"
          clearable
        />
      </Col>
      <Col span="4" style="text-align: right">
        <Button
          type="primary"
          style="margin-right: 15px"
          v-if="searchBtnShow"
          @click="searchAction"
          >搜索</Button
        >
        <!--<Button type="warning" @click="resetParam">重置</Button>-->
      </Col>
    </Row>

    <tree-grid
      :items="data"
      :columns="columns"
      @on-row-click="rowClick"
      @on-selection-change="selectionClick"
      @on-sort-change="sortClick"
    ></tree-grid>
  </div>
</template>
<script>
import TreeGrid from '%/modules/TreeGrid/TableGrid'
import { mapMutations } from 'vuex'
export default {
  name: 'menu-management',
  components: {
    TreeGrid
  },
  data() {
    return {
      searchBtnShow: false,
      columns: [
        {
          //type: 'selection',//多选input
          type: 'serial', //序号
          width: '50'
        },
        {
          title: '菜单名称',
          key: 'name',
          width: '150',
          align: 'left'
        },
        {
          title: 'icon',
          width: '100',
          type: 'icon'
        },
        {
          title: '排序',
          key: 'sort',
          //sortable: true,
          width: '100'
        },
        {
          title: '操作',
          type: 'action',
          actions: [
            {
              type: 'text',
              text: '编辑',
              color: 'info',
              class: 'editor'
            },
            {
              type: 'text',
              text: '详情',
              color: 'info',
              class: 'details'
            }
          ],
          width: '100'
        }
      ],
      data: [],
      listParam: {
        name: ''
      },
      page: {
        total: 0,
        current: 1,
        pageSize: 10,
        totalPage: 0
      }
    }
  },
  methods: {
    rowClick(data, index, event, type) {
      if(type === 'editor'){
        this.$router.push({
          //path: `menu-management/${type}/${data.id}/${'菜单编辑'}`,
          name:'menu-edit',
          params:{type,id:data.id,name:'菜单编辑'},
        })
      }else {
        this.$router.push({
          name:'menu-detail',
          params:{type,id:data.id,name:'菜单详情'},
        })
      }

    },
    selectionClick(arr) {
      //console.log('选中数据id数组:' + arr)
    },
    sortClick(key, type) {
      //console.log('排序字段:' + key)
      //console.log('排序规则:' + type)
    },

    //搜索
    searchAction() {
      this.page.current = 1
      this.page.size = 10
      this.getMenuTreeList()
    },
    //重置
    resetParam() {
      this.listParam = {
        name: ''
      }
      this.page.current = 1
      this.page.size = 10
      this.getMenuTreeList()
    },
    getMenuTreeList() {
      let params = {
        /*"currentPage": this.page.current,
        "pageSize": this.page.pageSize,*/
        //"orderColumn": "",
        //"orderSort": "desc",
        whereMap: {
          name: this.listParam.name
        }
      }
      this.$api.menuManagement.getMenuTreeList(params).then(res => {
        if (res.code === 200) {
          console.log(res.data)
          this.data = res.data
        } else {
          this.$Message.error(res.message)
        }
      })
    },
    //按钮显示
    buttonShow() {
      let buttonList = JSON.parse(localStorage.getItem('buttonList'))
      buttonList.map(val => {
        let key = Object.keys(val).toString()
        if (key === this.$route.name) {
          Object.values(val)[0].map(item => {
            if (item.code === 'P_0505_03') {
              this.searchBtnShow = true
            }
          })
        }
      })
    }
  },
  watch: {
    $route(to, from) {
      const fromUrl = from.path
      const toUrl = to.path
      if (
        (fromUrl.indexOf('editor') > -1 || fromUrl.indexOf('add') > -1) &&
        fromUrl.indexOf(toUrl) > -1
      ) {
        if (localStorage.getItem('page')) {
          let page = JSON.parse(localStorage.getItem('page'))
          this.page.current = page.current
          this.page.pageSize = page.pageSize
          this.getMenuTreeList()
          localStorage.setItem('page', '')
        }
      }
    }
  },
  mounted() {
    this.getMenuTreeList()
    this.buttonShow()
  },
  activated() {
    this.getMenuTreeList()
  }
}
</script>
<style scoped></style>
